<template>
  <BaseMainSlot>
    <template v-slot:btnsBar>
      <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :page-no="172"
        @add="add"
        @del="del"
      />
    </template>
    <template v-slot:searchbox>
      <div class="seach-box">
        <div class="select-box-content">
          <div class="select-box-content-name">设备名称：</div>
          <el-input
            v-model="seachEquip"
            clearable
            placeholder="请输入设备名称"
            @change="queryPageList()"
          />
        </div>
        <!-- <div class="select-box-content">
          <div class="select-box-content-name">数据项名称：</div>
          <el-input
            v-model="dataItemName"
            clearable
            placeholder="请输入数据项名称"
            @change="queryPageList()"
          />
        </div>-->
      </div>
    </template>
    <template v-slot:content>
      <div class="dataitem-main">
        <div class="tr-sid">
          <div class="sid-head">设备列表</div>
          <div class="sid-tree">
            <Equiplist
              :seachEquip="seachEquip"
              @selectionChange="selectionChange"
            />
          </div>
        </div>
        <div class="tab-box">
          <e-table
            ref="tableData"
            rowKey="equDataItemCode"
            :table-data="tableData"
            :table-columns="tableLabel"
            :page="currentPage"
            :size="pageSize"
            :total="totalSize"
            :loading="loading"
            :table-option="tableOption"
            @sizeChange="changePageSize"
            @pageChange="changeCurrentPage"
            @tableUpdatePlus="mixTableUpdatePlus"
            @handleSelectionChange="handleSelectionChange"
          >
            <template
              slot="operate"
              v-if="scoped.row.equDataItemCode"
              slot-scope="scoped"
            >
              <!-- <span
                class="table-btns-box"
                @click="edit(scoped.row)"
                v-if="judgePermission(172,'edit')"
              >
                <i class="el-icon-edit-outline"></i>
                <span>修改</span>
              </span> -->

              <span
                v-if="judgePermission(172,'deleteone')"
                class="table-btns-box table_del_btn"
                @click="delOne(scoped.row)"
              >
                <i class="el-icon-delete"></i>
                <span>删除</span>
              </span>
            </template>
          </e-table>
        </div>
      </div>
      <AddEditDialog
        ref="addEditDialog"
        :equipment-name="equipmentName"
        :equipment-code="equipmentCode"
        :data-item-list="dataItemList"
        :unit-list="unitList"
        :now-chance-stau="nowChanceStau"
        :title-text="titleText"
        :edit-object="editObject"
        :show.sync="showAddEditDialog"
        @closeDialog="closeDialog"
        @cancelDialog="cancel"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import { mymixin } from "@/utils/mixin";
import Equiplist from "./components/equiplist.vue";
import equipConfigDataItemApi from "@/api/basic-info-manage/equip-config-dataitem";
import AddEditDialog from "./components/add-edit-dialog.vue";
import dataItemManageApi from "@/api/basic-info-manage/data-item-manage";
import { mapGetters } from "vuex";
export default {
  name: "DataItemManage",
  components: { ActionBar, Pagination, BaseMainSlot, Equiplist, AddEditDialog },
  mixins: [mymixin],
  data() {
    return {
      //设备查询条件
      seachEquip: "",
      // 数据项下拉数据
      dataItemList: [],
      // 单位下拉框
      unitList: [],
      // 当前设备
      equipmentName: "",
      equipmentCode: "",
      // 当前选中的数据项数组
      checkedIdList: [],
      dataItemName: "",
      // 物联数据项/水质监测添加喝修改
      editObject: {},
      titleText: "",
      nowChanceStau: "",
      // 控制弹出框显示隐藏
      showAddEditDialog: false,
      tableLabel: [
        {
          label: "数据项名称",
          param: "dataItemName",
          show: true,
        },
        {
          label: "数据类型",
          param: "dataTypeName",
          show: true,
          notSearch: true,
        },
      ],
      // 表单事件
      tableOption: {
        label: "操作",
        options: [
          {
            label: "操作",
            slotName: "operate",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },

  watch: {},
  created() {
    this.getselectdatalist();
  },
  mounted() {},
  methods: {
    // 获取两个下拉框数据
    getselectdatalist() {
      // 获取单位选择项
      dataItemManageApi.queryUnit().then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          this.unitList = data;
        } else {
          this.$message.error(res.msg);
        }
      });
      dataItemManageApi.queryByCondition().then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          this.dataItemList = data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 选择设备传出选择的该设备信息
    selectionChange(e) {
      this.equipmentCode = e.equipmentCode;
      this.equipmentName = e.equipmentName;
      this.queryPageList();
    },
    queryPageList(e) {
      this.loading = true;
      this.tableData = [];
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          equipmentCode: this.equipmentCode,
          category: "STATE",
          ...e,
          ///dataItemName: this.dataItemName,
        },
      };
      // 查询表格数据
      equipConfigDataItemApi.queryPageList(params).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data;
          // 赋值总条数
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    handleSelectionChange(list) {
      this.checkedIdList = [];
      let notvalue = true;
      this.checkedIdList = list.map((item) => {
        if (item.equDataItemCode) {
          return item.equDataItemCode;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (notvalue === false) {
        this.delActive = false;
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.checkedIdList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 单个删除
    delOne(data) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass",
      })
        .then(() => {
          var form = new FormData();
          form.append("equDataItemCodeList", data.equDataItemCode);
          equipConfigDataItemApi.delList(form).then((res) => {
            if (res.code === 1) {
              this.$message.success("删除成功！");
              this.queryPageList();
            } else {
              this.$message.error("删除失败！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delmessage() {
      var form = new FormData();
      this.checkedIdList.forEach((a) => {
        form.append("equDataItemCodeList", a);
      });
      equipConfigDataItemApi.delList(form).then((res) => {
        if (res.code === 1) {
          this.$message.success("删除成功！");
          this.queryPageList();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    // 添加
    add() {
      this.nowChanceStau = "add";
      this.titleText = "添加";
      this.addActive = false;
      this.delActive = false;
      this.showAddEditDialog = true;
    },
    // 修改
    edit(row) {
      if (row.equDataItemCode) {
        this.editObject = JSON.parse(JSON.stringify(row));
        this.nowChanceStau = "edit";
        this.titleText = "修改";
        this.addActive = false;
        this.delActive = false;
        this.showAddEditDialog = true;
      } else {
        this.editObject = {};
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dataitem-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  .tr-sid {
    width: calc(20% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 10px;
    background-color: #225768;
    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree {
      width: 100%;
      height: calc(100% - 31px);
    }
  }
  .tab-box {
    width: calc(80% - 10px);
    margin-right: 10px;
    height: 100%;
    position: relative;
  }
  .tab-boxtwo {
    width: calc(100% - 10px);
    margin-right: 10px;
    height: 100%;
    position: relative;
  }
}
</style>
